<template>
    <view class="trainingcenter-content">
      <!-- 培训中心 -->
      <view  v-for="(item, index) in menuItems"  :key="index" class="menu-item" @tap="handleTap(item.path)">
        <image :src="item.icon" class="menu-icon" mode="aspectFit" />
        <text class="menu-text">{{ item.title }}</text>
      </view>
    </view>
  </template>
  
  <script setup>
  import { IMG_URL2 } from "@/config";
  import { getStorage } from "@/utils/storage";
const menuItems = ref([
  {
    title: '课程学习',
    icon: IMG_URL2+'peop/calendar.svg',
    path: '/pages/trainingcenter/courselist'
  },
  {
    title: '考试',
    icon: IMG_URL2+'peop/root-list.svg',
    path: '/pages/trainingcenter/examinationlist'
  },
  {
    title: '我的学习任务',
    icon: IMG_URL2+'peop/layers.svg',
    path: '/pages/distributivelearning/taskslist'
  },
  {
    title: '荣耀榜',
    icon: IMG_URL2+'peop/chart.svg',
    path: '/pages/distributivelearning/rankinglist'
  },
  {
    title: '分配学习任务',
    icon: IMG_URL2+'peop/layers.svg',
    path: '/pages/distributivelearning/index'
  }
])
let role=ref(getStorage('role'))

const handleTap = (path) => {
  uni.navigateTo({
    url: path,
    fail(err) {
      console.error('Navigation failed:', err)
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none'
      })
    }
  })
}
onShow(() => {
  if (role.value == 1) {
    menuItems.value = menuItems.value.filter(item => item.name != "分配学习任务");

  }
})
  </script>
  <style lang="scss">
  page {
    background-color: #f3f3f3;
  }
  </style>
  <style lang="scss" scoped>
  .trainingcenter-content {
      padding: 20rpx;
      box-sizing: border-box;
      .menu-item {
        display: flex;
        align-items: center;
        background-color: #ffffff;
        padding: 30rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;
        border-radius: 12rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
      }

      .menu-icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 20rpx;
      }

      .menu-text {
        font-weight: 400;
        font-size: 28rpx;
        color: rgba(44, 44, 44, 1);
      }
  }



  </style>
  